import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
// 自定义axios
const service = axios.create({
  // baseURL: '/api',
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 6000
})

// 自定义拦截器
// 请求拦截器 .....请求之前执行的函数，2个参数，请求发成功的回调函数，请求发失败的回调函数
// 请求拦截器有几个参数？
// 有两个参数，分别是两个回调函数(开始的时候不执行，回过头来，在特定的时机在执行)
// 第一个回调函数，是请求发送成功以后执行的函数
// 第三个回调函数，是请求发送失败以后执行的函数

service.interceptors.request.use((config) => {
  // console.log('111', '成功')
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }
  return config
}, (error) => {
  // console.log('222', '请求不成功')
  return Promise.reject(error)
}

)

// 响应拦截器
// 响应拦截器----服务器给相应数据到业务之前
// 响应拦截器的参数？
// 有2个参数，分别是2个回调函数
// 第一个回调函数。是服务器响应成功以后执行的回调函数
// 第二个回调函数，是服务器响应式失败以后(401 500 403 404。。。)以后执行的回调函数
service.interceptors.response.use((response) => {
  // console.log('333', '响应成功')
  // if(response.data.instanceof Blob) return response.data
  if (response.data instanceof Blob) return response.data
  // 响应成功对数据进行脱壳
  if (response.data.success) {
    return response.data
  } else {
    Message.error({ message: response.data.message })
    return Promise.reject(response)
  }
}, (error) => {
  // console.log('444', '响应不成功')
  // console.log('4服务器响应失败')
  // 涉及到Promise的底层， promise3个状态， pending 等待 resolve 成功 reject 失败
  // 这里如果 reject，那么在业务代码那边，就会执行 .catch的代码
  // 这里如果 resolve，那么在业务代码那边，就会执行 .then的代码
  // 因为这里已经是报错了，所以，我们这里必须写reject，告诉业务代码，我们这里报错了，请你用catch接受一下
  // 但是自己心里要清楚，如果这里写resolve，那么业务那边走的绝对是then里面的代码
  // console.dir(error)
  if (error?.response?.status === 401) {
    store.dispatch('user/logoutAction')
    router.push('/login')
  }
  return Promise.reject(error)
})
export default service
